import Tit from '../../components/Tit'
import React from 'react'
import { withRouter } from 'react-router-dom'
import { InputItem, Picker, List } from 'antd-mobile'
import district from '../../area'
import './AddAddress.less'
class AddAddress extends React.Component {
    state = {
        details: '',
        phone: '',
        receiver: '',
        defaultAddress: 0,
        ccc: '',
    }
    componentDidMount() {
        console.log(this.props.match.params.id)
        if (this.props.match.params.id === 'null') {
            return
        } else {
            this.$postData('/api/address/getAddressById', { id: this.props.match.params.id }, params => {
                console.log(params)
                this.setState({
                    ccc: [params.data.provinceId, params.data.cityId, params.data.areaId],
                    details: params.data.details,
                    phone: params.data.phone,
                    receiver: params.data.receiver,
                    defaultAddress: params.data.defaultAddress
                })
            })
        }
    }
    handleChange(key, val) {
        this.setState({
            [key]: val
        })
    }
    addAddress = () => {
        if (this.state.ccc === '' || this.state.receiver === '' || this.state.phone === '' || this.state.details === '') {
            this.Toast.info('请补充完整');
        } else {
            this.$postData('/api/address/addAddress', { provinceId: this.state.ccc[0], cityId: this.state.ccc[1], areaId: this.state.ccc[2], details: this.state.details, phone: this.state.phone, receiver: this.state.receiver, defaultAddress: this.state.defaultAddress }, params => {
                console.log(params)
                switch (params.code) {
                    case 100:
                        this.Toast.info('成功');
                        this.props.history.goBack()
                        break;
                    default:
                        this.Toast.info(params.msg);
                        break;
                }
            })
        }
    }
    render() {
        return (
            <div>
                <Tit tit={'新建地址'} zz={true}></Tit>
                <p className='OK' onClick={this.addAddress}>保存</p>
                <div className='AddAddress-d1'>
                    <div className='AddAddress-d2'>
                        <Picker extra="请选择"
                            data={district}
                            value={this.state.ccc}
                            title="地址"
                            onOk={e => this.setState({ ccc: e })}
                            onDismiss={e => console.log('dismiss', e)}
                        >
                            <List.Item arrow="horizontal"></List.Item>
                        </Picker></div>
                    <div className='xian'></div>
                    <InputItem
                        className='AddCard-d2'
                        placeholder="详细地址"
                        value={this.state.details}
                        onChange={this.handleChange.bind(this, 'details')}
                    ></InputItem>
                    <InputItem
                        className='AddCard-d2'
                        placeholder="姓名"
                        value={this.state.receiver}
                        onChange={this.handleChange.bind(this, 'receiver')}
                    ></InputItem>
                    <InputItem
                        className='AddCard-d2'
                        placeholder="手机号码"
                        type='number'
                        value={this.state.phone}
                        onChange={this.handleChange.bind(this, 'phone')}
                    ></InputItem>
                    <div className='center AddCard-d3 xin-center' onClick={() => { this.setState({ defaultAddress: this.state.defaultAddress === 1 ? 0 : 1 }) }}>
                        {this.state.defaultAddress ? <img src={require("../../static/img/yuan-hov.png")} alt="" /> : <img src={require("../../static/img/yuan.png")} alt="" />}
                        <p>设为默认地址</p>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(AddAddress)